import React from 'react';
import {Button,Modal} from 'antd';
import '../sysStyle/header.css'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

//退出按钮
const exitBtnStyle={
    float:'right',
    marginRight:'8%',
    marginTop:'8px',
}

//退出登录
const Header =(props)=>{
    return(
        <div className='topStyle'>
            <header className='headStyle'>
                <span>&nbsp;教你轻松用手机后台管理系统</span>
                <Button 
                    onClick={()=>{
                        confirm({
                            title: '确认退出登录？',
                            icon: <ExclamationCircleOutlined />,
                            content: '退出后需要重新输入密码进行登录',
                            okText:'退出',
                            cancelText:'取消',
                            onOk() {
                                console.log('退出登录');
                                props.props.history.push('/login');
                                localStorage.removeItem('token');
                            },
                            onCancel() {
                              console.log('Cancel');
                            },
                          });
                    }}   
                    danger
                    type="primary" 
                    style={exitBtnStyle}
                ><a>退出登录</a></Button>
           </header>
            {/* <nav className='topNav'>
                <NavLink activeClassName='active' exact to='/home'>生活小贴士</NavLink>
                <NavLink activeClassName='active' to='/useapp'>易用App</NavLink>
                <NavLink activeClassName='active' to='/userinfo'>用户信息</NavLink>
                <NavLink activeClassName='active' to='/feedback'>意见反馈</NavLink>
            </nav> */}
        </div>
    )
}

export default Header;

